<template>
    <div>
      <table>
        <tr>
            <td> 
    <span class="demonstration">年</span>
    <el-date-picker
      v-model="value2"
      type="year"
      placeholder="选择年">
    </el-date-picker>
</td>    <span style="margin-left: 20px">统计类型:</span>
    <el-select v-model="value1" placeholder="请选择">
    <el-option  v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <!-- <el-button type="primary" style="margin-left: 20px;" @click="dian()">搜索</el-button> -->
        </tr><br>
    </table><br>
      <div id="main"  ref="chart" :style="{ width: '1000px', height: '500px' }"></div>
    </div>
  </template>
  <script>
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
  } from 'echarts/components';
  import { LineChart } from 'echarts/charts';
  import { UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
  ]);
  export default {
  data(){
    return{
      options: [{
          value: "1",
          label: '新增会员'
        },
        {
          value: "2",
          label: '今日登录会员'
        },
        {
          value: "3",
          label: '预约人数'
        },
        {
          value: "4",
          label: '报告上传'
        }
      ],
      value1:"",
        value2: '',
    // echarts图表实例
    chart: null,
    //今日登录会员
    myTable:[],
    //新增会员
    huiyuan:[],
    //预约人数
    yuy:[],
    //报告已上传的次数
    baogaocount:[],
    yr:"",
        //==========================
    }
   },
   methods: {
    // dian(){
    //   if(this.value1==""||this.value1==null){
    //     this.$message.error('必须选中统计类型');
    //   }
    //   if(this.value2!="" &&this.value1!=""){
    //     alert(this.value1);
    //       switch(this.value1){
    //         case "1":
    //         this.axios.get("/api/chaxinzenghuiyuan",{params:{year:this.value2}}).then(data=>{
    //          console.log(data.data);
    //          this.huiyuan=data.data;
    //         //  alert(this.myTable);
    //         this.drawLine();
    //         })           
    //          break;
    //         case "2":
    //             //  let a=dayjs(new Date(this.value2)).format('YYYY-MM-DD')
    //     this.axios.get("/api/ok").then(data=>{
    //          console.log(data.data);
    //          this.myTable=data.data;
    //         //  alert(this.myTable);
    //         this.drawLine();
    //         })
    //         break;
    //         case "3":
    //         this.axios.get("/api/chacountyuding",{params:{year:this.value2}}).then(data=>{
    //          console.log(data.data);
    //          this.yuy=data.data;
    //         //  alert(this.myTable);
    //         this.drawLine();
    //         })  
    //         break;
    //         case "4":
    //         this.axios.get("/api/scbaogao",{params:{year:this.value2}}).then(data=>{
    //          console.log(data.data);
    //          this.baogaocount=data.data;
    //         //  alert(this.myTable);
    //         this.drawLine();
    //         }) 
    //         break;
    //       }
    //   }
 
  
    // },
     //
     drawLine() {
        //基于准备好的dom，初始化echarts实例
        // let myChart = this.$echarts.init(document.getElementById("myChart"));
        var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
        //图表顶部的标题
      text: 'Stacked Line'
    },
    tooltip: {
         //鼠标悬浮框的提示文字
      trigger: 'axis'
    },
    //最顶上的数据
    legend: {
      data: ['新增会员', '今日登录会员', '预约人数', '报告上传', '']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    //下面表格显示的数据
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [ //是否展示y轴坐标竖线 ：axisLine: { show: false } （X轴和Y轴原理）     驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
    //是否展示y轴坐标刻度：axisTick: { show: false }
      {
        name: '新增会员',
        type: 'line',
        stack: 'Total',
        data:this.huiyuan
      },
      {
        name: '今日登录会员',
        type: 'line', //pie->饼状图  line->折线图  bar->柱状图
        stack: 'Total',
        data: this.myTable
      },
      {
        name: '预约人数',
        type: 'line',
        stack: 'Total',
        data:this.yuy
      },
      {
        name: '报告上传',
        type: 'line',
        stack: 'Total',
        data:this.baogaocount
      }
    //   {
    //     name: 'Search Engine',
    //     type: 'line',
    //     stack: 'Total',
    //     data: [820, 932, 901, 934, 1290, 1330, 1320]
    //   }
    ]
  };
  
  option && myChart.setOption(option);
  }
  },
  mounted() {
      this.drawLine();
    //   this.dian();
    },
    }
  </script>
  
  <style>
  
  </style>